<template>
	<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" @open="onOpen" @close="onClose">
		<el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
			<el-form-item label="设备类型编号：" prop="equipmentTypeId">
				<el-input v-model="form.equipmentTypeId" :disabled="isEdit"></el-input>
			</el-form-item>
			<el-form-item label="设备类型名称：" prop="equipmentTypeName">
				<el-input v-model="form.equipmentTypeName"></el-input>
			</el-form-item>
			<el-form-item label="设备类型全称：" prop="equipmentTypeFullName">
				<el-input v-model="form.equipmentTypeFullName"></el-input>
			</el-form-item>
			<el-form-item label="设备类型代码：" prop="equipmentTypeCode">
				<el-input v-model="form.equipmentTypeCode"></el-input>
			</el-form-item>

			<el-form-item label="分类类型：" prop="equipmentTypeNumber">
				<el-select v-model="form.equipmentTypeNumber">
					<el-option v-for="item in numOptions" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="是否末级节点：" prop="isLeaf">
				<el-select v-model="form.isLeaf">
					<el-option v-for="item in isLeafOptions" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="备注：">
				<el-input v-model="form.remarks" type="textarea" :rows="3"></el-input>
			</el-form-item>
			<el-form-item label="排序：" prop="equipmentTypeNumber">
				<el-input v-model="form.sortIndex"></el-input>
			</el-form-item>
			<el-form-item label="级别：" prop="equipmentTypeNumber">
				<el-input v-model="form.lev"></el-input>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import axios from 'axios';
	export default {
		name: 'EditType',
		props: {
			title: {
				type: String,
				default: '编辑分类'
			},
			form: {
				type: Object,
				required: true
			},
			formLabelWidth: {
				type: String,
				default: '120px'
			},
			isEdit: {
				type: Boolean,
				default: false
			},
			editDialogVisible: Boolean
		},
		data() {
			return {
				dialogVisible: false,
				loading: false,
				rules: {
					equipmentTypeId: [{
						required: true,
						message: '请输入设备类型编号',
						trigger: 'blur'
					}],
					equipmentTypeName: [{
						required: true,
						message: '请输入设备类型名称',
						trigger: 'blur'
					}],
					equipmentTypeFullName: [{
						required: true,
						message: '请输入设备类型全称',
						trigger: 'blur'
					}],
					equipmentTypeCode: [{
						required: true,
						message: '请输入设备类型代码',
						trigger: 'blur'
					}],
					equipmentTypeNumber: [{
						required: true,
						message: '选择分类类型',
						trigger: 'blur'
					}],
					isLeaf: [{
						required: true,
						message: '选择是否末级节点',
						trigger: 'blur'
					}]
				},
				isLeafOptions: [{
						value: 0,
						label: '否'
					},
					{
						value: 1,
						label: '是'
					}
				],
				numOptions: [{
						value: 0,
						label: '设备'
					},
					{
						value: 1,
						label: '课室'
					}
				]
			}
		},
		computed: {
			dialogTitle() {
				return this.isEdit ? '编辑分类' : '添加分类';
			}
		},
		methods: {
			onOpen() {
				// 对话框打开时的操作
			},
			onClose() {
				// 对话框关闭时的操作
				this.$refs.formRef.resetFields();
				this.$emit('update:editDialogVisible', false);
				
			},
			submitForm() {
				console.log(this.form);
				let url = ''
				if (this.isEdit == true) { //isEdit为true，则为更改
					url = 'http://localhost:8080/equipType/edit';
				} else {
					url = 'http://localhost:8080/equipType/addNew';
				}
				axios.post(url,
						this.form
					)
					.then(response => {
						if (response.data.code == 200) {
							this.$message({
								type: 'success',
								message: response.data.message
							});
							
							this.onClose();
						} else {
							this.$message({
								type: 'error',
								message: response.data.message
							});
						}
					})
					.catch(error => {
						this.$message({
							type: 'info',
							message: '已取消更改'
						});
					});
			}
		},
		watch: {
			form: {
				handler(newVal) {
					// 当传入的表单数据发生变化时，更新内部的弹窗显示状态
					if (newVal) {
						this.dialogVisible = true;
					}
				},
				deep: true
			}
		}
	}
</script>